<template>
  <div :id="id" class="chart" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";
export default {
  components: {},
  props: {
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "300px",
    },
    isAnimation: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      id: "",
      oBox: null, // 保存dom元素
      myChart: null, // 保存echarts实例
      hasData: false, // true:说明有数据 false:说明没有数据
    };
  },
  computed: {},
  watch: {},
  created() {
    this.id = uuidv1(); // 保证id是唯一的
  },
  mounted() {
    // 1.获取dom元素
    this.oBox = document.getElementById(this.id);
    // 2.实例化echarts
    this.myChart = echarts.init(this.oBox);
  },
  activated() {},
  deactivated() {},
  updated() {},
  destroyed() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    // 说明：所有图表都适用于此图表组件，只需要在父级中调用的时候传入配置，其配置中的数据在父
    // 级中做处理，此组件中不做数据处理
    // id是唯一的；
    // 父级中传递属性：prop中传递基础属性，元素大小等
    // 父级中传递动态配置：通过调用initchart方法，将配置作为参数传入
    // option：父级中传递过来
    initChart(option) {
      // 1.判断myChart实例是否存在,不存在的话重新实例化
      if (!this.myChart) {
        this.myChart = echarts.init(this.oBox);
      }

      // 2.判断是否有数据
      this.hasData = !this.isEmptyObject(option);
      // 3.有数据的情况
      if (this.hasData) {
        // 1.没有动效才清空数据
        if (!this.isAnimation) {
          this.myChart.clear();
        }
        // 2.初始化数 显示图表
        this.myChart.setOption(option);
        // 3.图表自适应
        window.addEventListener("resize", () => {
          if (this.myChart) {
            this.myChart.resize();
          }
        });
      } else {
        // 4.没有数据的情况
        this.oBox.removeAttribute("_echarts_instance_");
        this.oBox.innerHTML =
          '<div style="text-align:center;font-size:24px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-weight: bold;">暂无数据</div>';
        // 同时 把myChart 置为空对象
        this.myChart = null;
      }
    },
    isEmptyObject(obj) {
      return Object.keys(obj).length === 0;
    },
    setInit(option) {
      if (!this.myChart) {
        this.myChart = echarts.init(this.oBox);
      }
      this.myChart.clear();
      this.myChart.setOption(option);
      this.myChart.resize();
 
    },
    showLoading() {
      this.myChart.showLoading();
    },
    hideLoading() {
      this.myChart.hideLoading();
    },
  },
  filter() {},
};
</script>
<style scoped>
.chart {
  position: relative;
}
</style>
